<%@ page language="java" pageEncoding="utf-8"%>
<%@page import="com.farm.web.constant.FarmConstant"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/view/conf/farmtag.tld" prefix="PF"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<base href="<PF:basePath/>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${hourview.classview.classt.name }-<PF:ParameterValue
		key="config.sys.title" /></title>
<meta name="description"
	content='<PF:ParameterValue key="config.sys.mate.description"/>'>
<meta name="keywords"
	content='<PF:ParameterValue key="config.sys.mate.keywords"/>'>
<meta name="author"
	content='<PF:ParameterValue key="config.sys.mate.author"/>'>
<meta name="robots" content="index,follow">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<jsp:include page="../atext/include-web.jsp"></jsp:include>
<link rel="stylesheet"
	href="<PF:basePath/>text/lib/kindeditor/editInner.css" />
<script charset="utf-8"
	src="<PF:basePath/>text/lib/super-validate/validate.js"></script>
</head>
<style>
.wlp-userspace-h1 {
	font-size: 36px;
	text-align: center;
}

.picLUp {
	width: 100%;
	background-size: 100% 100%;
	color: white;
	background-color: #2a2f32;
}

.wpl-class-tab li a {
	user-select: none;
	draggable: false;
}

.wpl-class-tab .nav  li a {
	color: #ffffff;
}

.wpl-class-tab .nav  li .wlp-tab-drop-a {
	color: #333333;
}

.wpl-class-tab .nav  li a:HOVER {
	color: #666666;
}

.wpl-class-tab .nav  li a:FOCUS {
	color: #666666;
}

.wpl-class-tab .nav .active a {
	color: #666666;
}

.wlp-a-nounderline a:HOVER {
	text-decoration: none;
	font-weight: 200;
}
</style>
<body>
	<div class="container-fluid">
		<div class="row">
			<!-- 导航 -->
			<jsp:include page="../commons/head.jsp"></jsp:include>
		</div>
	</div>
	<div class="container picLUp">
		<div class="row" id="hourViewId"
			style="color: #ffffff; margin-top: 70px;">
			<div class="col-sm-9" style="color: #ffffff; font-size: 14px;">
				<div style="padding: 20px; font-size: 16px; color: #dddddd;">
					<a style="font-weight: 700; color: #ffffff;"
						href="classweb/Pubview.do?classid=${hourview.classview.classt.id }">
						${hourview.classview.classt.name}</a> &nbsp;/&nbsp;<span>${hourview.chapter.title}</span>
					&nbsp;/&nbsp;${hourview.hour.title}&nbsp;/&nbsp;<span
						id="currentPlayState" style="font-size: 12px;">...</span>
				</div>
				<c:if test="${hourview.hour.filemodel=='3'}">
					<iframe id="hourIframe"
						style="height: 100%; width: 100%; border: 0px; border-radius: 8px;"
						src="${playUrl}"></iframe>
					<script type="text/javascript">
						$(function(){
							$('#hourIframe').height($(window).height() - 220);
						});
						//是否正在播放
						function isPlay(){
							return true;
						}
						//获得当前播放时间-秒
						function getPlayedSeccend() {
							return 100;
						}
						//获得当前总时长-秒
						function getPlayDuration() {
							return 100;
						}
					</script>
				</c:if>
				<c:if
					test="${hourview.hour.filemodel=='1'||hourview.hour.filemodel=='2'}">
					<c:if
						test="${hourview.filebase.exname=='mp4'||hourview.filebase.exname=='MP4'}">
						<jsp:include page="commons/player.jsp"></jsp:include>
					</c:if>
					<c:if
						test="${hourview.filebase.exname=='pdf'||hourview.filebase.exname=='PDF'}">
						<div class="btn-group btn-group-xs" role="group" aria-label="..."
							style="text-align: right; float: right; padding: 8px; padding-top: 2px; padding-bottom: 2px;">
							<button type="button" class="btn btn-success"
								onclick="showMaxIframe()">
								<i class="glyphicon glyphicon-resize-full"></i>&nbsp;全屏展示
							</button>
							<script type="text/javascript">
								function showMaxIframe(){
									 //'#wlp_playbox_left'
									  var element = document.getElementById('player1');// 或者是任何你想全屏化的元素，例如：document.getElementById('your-element-id')
									  if (element.requestFullscreen) {
									    element.requestFullscreen();
									  } else if (element.mozRequestFullScreen) { // Firefox之前版本的API
									    element.mozRequestFullScreen();
									  } else if (element.webkitRequestFullscreen) { // Chrome等旧版
									    element.webkitRequestFullscreen();
									  } else if (element.msRequestFullscreen) { // IE/Edge
									    element.msRequestFullscreen();
									  }
								}
							</script>
						</div>
						<c:if test="${hourview.pinum>0}">
							<jsp:include page="commons/imgs.jsp"></jsp:include>
						</c:if>
						<c:if test="${hourview.pinum==0}">
							<jsp:include page="commons/pdf.jsp"></jsp:include>
						</c:if>
					</c:if>
				</c:if>
			</div>
			<div class="col-sm-3 wlp-a-nounderline  hidden-xs">
				<div style="height: 100%; overflow: auto; padding-right: 20px;"
					id="hourViewSiderightId">
					<div class="media"
						style="padding-top: 10px; padding-bottom: 10px; height: 80px; overflow: hidden;">
						<div class="media-left">
							<img class="img-rounded" style="height: 60px;"
								src="${hourview.classview.imgurl}">
						</div>
						<div class="media-body">
							<a style="color: #cccccc; text-decoration: none;"
								href="classweb/Pubview.do?classid=${hourview.classview.classt.id }">
								${hourview.classview.classt.name}</a>
							<div
								style="font-size: 12px; overflow: hidden; max-height: 36px; width: 100%;">
								${hourview.classview.classt.shortintro }</div>
						</div>
					</div>
					<hr
						style="margin-bottom: 10px; margin-top: 10px; color: #666666; border-color: #666666; border-top: 1px dashed #666666;"
						class="wlp-userspace-hr">
					<div
						style="padding-bottom: 20px; padding-left: 0px; font-size: 18px;">
						课程目录:</div>
					<jsp:include page="commons/chapter.jsp"></jsp:include>
					<!--课程简介 <div
						style="padding-bottom: 20px; padding-left: 0px; font-size: 12px; color: #cccccc;"></div> -->
				</div>
				<c:if test="${USEROBJ!=null}">
					<!-- 大屏幕展示 -->
					<div class="btn-group btn-group-justified  btn-group-lg"
						role="group" style="margin-top: 8px;"
						aria-label="Justified button group with nested dropdown">
						<c:if test="${!learnView.learned }">
							<a
								href="classweb/Pubview.do?classid=${hourview.classview.classt.id}"
								class="btn btn-danger" role="button">开始课程学习</a>
						</c:if>
						<c:if test="${learnView.learned }">
							<c:if test="${hourview.hour.filemodel=='3'}">
								<a href="javascript:openOperatorWin()" class="btn btn-danger"
									role="button">完成本课时学习</a>
							</c:if>
							<c:if test="${hourview.hour.filemodel!='3'}">
								<PF:IfParameterEquals key="config.sys.hour.complete.handable"
									val="true">
									<a href="javascript:openOperatorWin()" class="btn btn-danger"
										role="button">完成本课时学习</a>
								</PF:IfParameterEquals>
							</c:if>
						</c:if>
					</div>
				</c:if>
			</div>
		</div>
	</div>
	<!-- tabs选项卡功能相关----start -->
	<jsp:include page="/view/web-simple/hour/commons/tabs.jsp"></jsp:include>
	<!-- tabs选项卡功能相关----end -->
	<jsp:include page="commons/hourOperator.jsp"></jsp:include>
	<PF:IfParameterEquals key="config.playing.debug.able" val="true">
		<!-- 播放状态调试信息 -->
		<div
			style="border: 1px dotted; padding: 20px; margin: 20px; width: 90%; margin: auto; background-color: #ffffff; font-weight: bold; color: #000000;">
			<div class="row" id="playStateDebugBox"></div>
		</div>
	</PF:IfParameterEquals>
	<div class="container-fluid" style="padding: 0px;">
		<!-- 页脚 -->
		<jsp:include page="../commons/foot.jsp"></jsp:include>
	</div>
</body>
<script type="text/javascript">
	function getClientHeight() {
		return document.documentElement.clientHeight - 184;
	}
	$(function() {
		setWindowHeight();
	});
	function setWindowHeight() {
		$('#hourViewId').height(getClientHeight());
		$('#hourViewSiderightId').height(getClientHeight());
	}
</script>
<script>
//跳过焦点检查
var isPassFocus = !('${config_playing_focus_check_is}' === 'true' || '${config_playing_focus_check_is}' === 'TRUE');
//跳过播放记录检查
var isPassPlsy = !('${config_playing_play_check_is}' === 'true' || '${config_playing_play_check_is}' === 'TRUE');
//失去焦点时停止视频播放
var isStopAble = ('${config_playing_nofocus_unplay}' === 'true' || '${config_playing_nofocus_unplay}' === 'TRUE');
//是否展示学习时长
var isShowPlaytime = ('${config_playing_showtime}' === 'true' || '${config_playing_showtime}' === 'TRUE');
//记录鼠标上次移动时间
var liveDate = new Date();
//鼠标移动有效时间秒
var liveTimeNum = parseInt('${config_playing_mousemove_periodic}');
//检查周期
var checkUpRoundNum = parseInt('${config_playing_check_periodic}');
//上次同步分钟数（只记录分，即可判断当前60秒内是否提交）
var loadupMenute=new Date().getMinutes();
//之前的学习时间（数据库中保存的）
var hourplaytime= parseInt('${empty hourview.playtime.ptime?0:hourview.playtime.ptime}');
var allplaytime=hourplaytime;
</script>
<PF:IfMobile state="true">
	<!-- 如果是移动端，失去焦点也不停止播放 -->
	<script type="text/javascript">
	isStopAble = false;
	</script>
</PF:IfMobile>
<c:if test="${isFavorite}">
	<script type="text/javascript">
		initCollection('1');
	</script>
</c:if>
<c:if test="${!isFavorite}">
	<script type="text/javascript">
		initCollection('0');
	</script>
</c:if>
<script>
	$(function() {
		try {
			playStatDebug(99,"***后台同步状态***","暂未同步",true);
			loadPlayEvent();
		} catch (e) {
			console.warn(e);
		}
	});
	//提交播放状态
	function uploadPlayStat(){
		var c_loadupMenute=	new Date().getMinutes();
		if(loadupMenute!=c_loadupMenute){
			var curent_played_seccend=parseInt(getPlayedSeccend());
			var process=parseInt(curent_played_seccend*100/getPlayDuration());
			$.post('playing/live.do', {
				'hourid' : '${hourview.hour.id}',
				'process':process
			}, function(flag) {
				if(flag.STATE=='0'){
					//提交成功
					loadupMenute=c_loadupMenute;
					allplaytime=hourplaytime+flag.info.allPlayMinute;
					playStatDebug(99,"***后台同步状态***","记录进度"+ flag.info.curentProcess+"%", false);
				}else{
					playStatDebug(99,"***后台同步状态***", flag.MESSAGE, true);
				}
			}, 'json');
		}
	}
	
	//加载远程播放事件
	function loadPlayEvent() {
		$("body").mouseover(function() {
			liveDate = new Date();
		});
		//定时汇报播放状态
		window.clearInterval(t1);
		var t1 = window.setInterval(function() {
			playHandle(uploadPlayStat);
		}, checkUpRoundNum * 1000);
		//定时刷新播放状态
		window.clearInterval(t2);
		var t2 = window.setInterval(function() {
			playHandle(function() {
				//什么都不做只展示状态
			});
		}, 1000);
	}
	//(每次检查播放状态的方法，入参是提交播放事件到后台的方法)
	function playHandle(func) {
		//清空调试信息
		playStatDebug(1,"状态检查周期", checkUpRoundNum+"s", false);
		playStatDebug(11,"起始播放进度", "${hourview.playtime.duration}%", false);
		playStatDebug(2,"是否跳过播放状态检查", isPassPlsy, false);
		playStatDebug(3,"是否跳过焦点状态检查", isPassFocus, false);
		playStatDebug(31,"是否失去焦点时停止播放", isStopAble, false);
		playStatDebug(32,"上次同步时间",loadupMenute+"分",false);
		try {
			isPlay();
			playStatDebug(4,"校验播放函数", "正常", false);
		} catch (e) {
			playStatDebug(4,"校验播放函数", "异常", true);
			console.warn("isPlay()方法未实现!");
			return;
		}
		try {
			isFocus();
			playStatDebug(5,"校验焦点函数", "正常", false);
		} catch (e) {
			playStatDebug(5,"校验焦点函数", "异常", true);
			console.warn("isFocus()方法未实现!");
			return;
		}
		playStatDebug(6,"播放状态", isPlay(), !isPlay());
		playStatDebug(7,"综合焦点状态[窗口焦点/鼠标活动]", isFocus(), !isFocus());
		if (isPassPlsy || isPlay()) {
			if (isPassFocus || isFocus()) {//播放中提交事件记录
				func();
				var showPlayTRime="";
				if(isShowPlaytime){
					showPlayTRime='(已学习'+allplaytime+'分)';
				}
				playStatInfo('播放中'+showPlayTRime+'...',false);
			} else {
				playStatInfo('窗口未激活',true);
				//暂停视频播放
				try {
					if(isStopAble){
						stopPlay();
					}
				} catch (e) {
					playStatDebug(11,"停止播放函数", "异常", true);
					console.warn("stopPlay()方法未实现!");
					return;
				}
			}
		} else {
			playStatInfo('未播放',true);
		}

	}
	//打印播放状态调试信息
	function playStatDebug(id,title, val, isWarn) {
		if (isWarn) {
			val = "<span class='text-danger'>" + val + "</p>";
		} else {
			val = "<span class='text-success'>" + val + "</p>";
		}
		if(id){
			$('#debugNode'+id).remove();
		}
		$('#playStateDebugBox').append(
				'<div id="debugNode'+id+'" class="col-md-3">' + title + ":" + val + '</div>');
	}
	//展示播放状态（综合焦点和播放状态）
	function playStatInfo(title,isWarn){
		if(isWarn){
			$('#currentPlayState').html(
			'<span style="color:#f75d5f;">'+title+'</span>');
		}else{
			$('#currentPlayState').html(
			'<span style="color:#00b43c;">'+title+'</span>');
		}
		playStatDebug("100","***综合状态***",title, isWarn);
	}
	
	
	//是否激活状态
	function isFocus() {
		var isFlag = true;
		try {
			//当前可以计算出焦点
			if (typeof document.hasFocus !== 'function') {
				isFlag = !document.hidden
			}
			isFlag = document.hasFocus()
		} catch (e) {
			console.warn(e);
			return isFlag;
		}
		playStatDebug(8,"窗口焦点状态", isFlag, !isFlag);
		if (!isFlag) {
			//判断鼠标上次移动时间
			var secend = new Date() - liveDate;
			playStatDebug(9,"鼠标活动状态",(secend / 1000 )+"/"+ liveTimeNum ,!(secend / 1000 < liveTimeNum));
			if (secend / 1000 < liveTimeNum) {
				//鼠标在10分钟内动过，也算有焦点
				isFlag = true;
			} else {
				isFlag = false;
			}
		}
		return isFlag;
	}
</script>
</html>